<template>
    <el-button type="danger" @click="peDelete()">删除</el-button>
    <el-button type="success" @click="peUpdate()">修改</el-button>
    <el-button type="success" @click="peAdd()">新增</el-button>
    <el-divider />
    <!-- 查询 -->
    <el-form :inline="true" :model="from" class="demo-form-inline">
        <el-form-item label="产品名称">
            <el-input v-model="from.PName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="定价人员">
            <el-input v-model="from.PEPricingPeople" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="询价状态">
            <el-select v-model="from.IsState" placeholder="请选择" clearable style="width: 100px">
                <el-option label="已定价" :value="true" />
                <el-option label="已询价" :value="false" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetPeList()">查询</el-button>
        </el-form-item>
    </el-form>

    <h2 style="text-align: center; font-size: 30px; margin-top: 10px">采购列表</h2>
    <!-- 表格 -->
    <el-table :data="tableDatapev" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="pName" label="产品名称" />
        <el-table-column prop="pSpec" label="产品单位" />
        <el-table-column prop="peInquiryDate" label="询价日期" />
        <el-table-column prop="peInquiryClerk" label="询价人员" />
        <el-table-column prop="pePricingPeople" label="定价人员" />
        <el-table-column prop="isState" label="询价状态">
            <template v-slot="scop">
                <span v-if="scop.row.isState == false" style="color: blue">已询价</span>
                <span v-if="scop.row.isState == true" style="color: green">已定价</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template v-slot="scop">
                <el-button type="warning" plain v-if="scop.row.isState == false"
                    @click="selectPe(scop.row.procureEnquiryId)">定价</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize" prev-text="上一页"
                    next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                    :total="page.pagecount">
                    ，当前是{{ page.pageindex }}/{{ page.tolcount }}页，每页{{ page.pagesize }}条
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize" prev-text="上一页"
                    next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                    :total="page.pagecount">
                    <el-button :disabled="page.pageindex == 1" @click="page.pageindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize" prev-text="上一页"
                    next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                    :total="page.pagecount">
                    <el-button :disabled="page.pageindex == page.tolcount"
                        @click="page.pageindex = page.tolcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import http from '../../../http.js';
import axios from 'axios';
import router from '@/router/index.js';

onMounted(() => {
    GetPeList();
})

//显示采购询价列表
const tableDatapev = ref([])

//查询条件
const from = reactive({
    PName: '',
    PEPricingPeople: '',
    IsState: ''
})

//分页条件
const page = reactive({
    pageindex: 1,
    pagesize: 10,
    pagecount: 0,
    tolcount: 0
})

watch(page, () => {
    GetPeList()
})

//获取采购询价列表
const GetPeList = () => {
    axios.get(http.zblnb + "/cg/api/ProcureEnquiry/ProcureEnquirySelect", {
        params: {
            pageindex: page.pageindex,
            pagesize: page.pagesize,
            PName: from.PName,
            PEPricingPeople: from.PEPricingPeople,
            IsState: from.IsState
        }
    })
        .then(res => {
            tableDatapev.value = res.data.data.data;
            page.pagecount = res.data.data.pagecount;
            page.tolcount = res.data.data.tolcount;
            console.log(res.data.data.data);
        })
}

//表格多选获取值
const multipleSelection = ref([])
const nenuUpdid = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    nenuUpdid.value = val.map(x => x.procureEnquiryId);
    console.log(multipleSelection.value);
    console.log(nenuUpdid.value);
}

const peDelete = () => {
    if (nenuUpdid.value.length == 0) {
        ElMessage.error("请选择要删除的采购询价")
        return;
    } else {
        let ids = {
            "ids": nenuUpdid.value,
            "delName": "string"
        }
        //判断是否确认删除
        ElMessageBox.confirm(
            '此操作将永久删除该采购询价, 是否继续?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            axios.post(http.zblnb + "/cg/api/ProcureEnquiry/ProcureEnquiryDelete", ids)
                .then(res => {
                    if (res.data.data == 1) {
                        ElMessage.success("删除成功")
                        GetPeList()
                    } else {
                        ElMessage.error("删除失败")
                    }
                })
        })
    }
}

// 修改页面
const peUpdate = () => {
    if (nenuUpdid.value.length == 0) {
        ElMessage.error("请选择要修改的采购询价")
        return
    } else {
        router.push({
            path: '/ProcureEnquiryUpdate',
            query: {
                id: nenuUpdid.value[0]
            }
        })
    }
}

//定价页面
const selectPe = (id: number) => {
    router.push({
        path: '/PricingCreate',
        query: {
            id: id
        }
    })
}

const peAdd = () => {
    router.push({
        path: '/ProcureEnquiryCreate',
    })
}
</script>

<style></style>